<template>
  <div class="ding">
    <div class="hang">
      <div></div>
      <div class="elm">饿了么</div>
      <div class="yuan">
        <span class="iconfont icon-gengduo-01"></span>
        <span class="s1">|</span>
        <span class="iconfont icon-guangpan"></span>
      </div>
    </div>
    <div class="hang2">
        <span v-for="(item,index) in shuzu" :key="index" :class="{dao:true,actives:zxcindex==index}" @click="zxcindex=index">{{item.text}}</span>
    </div>
    <div class="hang3">
        <div class="h1">
            <span class="d1"><img src="../assets/饿了么_首页_06.gif" alt=""></span>
            <span>纯手工饺子(凤城九路店)</span>
            <span></span>
            <span>已送达</span>
        </div>
    </div>
    <div class="hang3"></div>
    <div class="hang3"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        zxcindex:0,
      shuzu: [
        { ip: 1, text: "全部" },
        { ip: 2, text: "待消费" },
        { ip: 3, text: "待评价" },
        { ip: 4, text: "退款" },
      ],
    };
  },
};
</script>

<style scoped>
.ding {
  padding: 20px;
  background-color: #f5f5f5;
}
.hang {
  display: flex;
  justify-content: space-between;
}
.hang div:nth-child(1) {
  width: 90px;
  height: 40px;
}
.yuan {
  width: 90px;
  height: 30px;
  border-radius: 20px;
  background-color: #fbfbfb;
  text-align: center;
  line-height: 30px;
  padding: 5px;
}
.iconfont {
  font-size: 26px;
}
.s1 {
  font-size: 26px;
}
.icon-gengduo-01 {
  margin-right: 5px;
}
.icon-guangpan {
  margin-left: 5px;
}
.elm {
  font-size: 24px;
  font-weight: bold;
}
.hang2{
    margin-top: 30px;
}
.dao{
    font-size: 20px;
    margin-right: 20px;
   
}
.actives{
    font-weight: bold;
    font-size: 22px;
    border-bottom: 5px solid #51b3f6;
    height: 40px;
}
.hang3{
    width: 100%;
    height: 200px;
    background-color: #fff;
    margin-top: 15px;
    border-radius: 10px;
}
.d1{
    display: inline-block;
    width: 50px;
    height: 50px;
}
img{
    width: 100%;
}
</style>